<template>
  <div>

    <el-card>
      <!-- 控制显示隐藏的按钮 -->
      <el-button @click="toggleCardVisibility">
        <div>查看店铺</div>
      </el-button>
    </el-card>
    <el-card v-show="isCardVisible">
      <!--上方搜索框-->
      <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
        <el-form-item label="流水号" prop="flowNumber">
          <el-input size="small" clearable v-model="keyword.flowNumber" placeholder="流水号"></el-input>
        </el-form-item>
        <el-form-item label="店铺ID" prop="productName">
          <el-input size="small" clearable v-model="keyword.storeId" placeholder="店铺ID"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称" prop="applyTime">
          <el-input size="small" clearable v-model="keyword.storeName" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="接单手机" prop="customerName">
          <el-input size="small" clearable v-model="keyword.orderPhone" placeholder="接单手机"></el-input>
        </el-form-item>
        <el-form-item label="设备商" prop="measureCode">
          <el-input size="small" clearable v-model="keyword.deviceSupplier" placeholder="设备商"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="measureCode">
          <el-input size="small" clearable v-model="keyword.createTime" placeholder="创建时间"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-input size="small" clearable v-model="keyword.secretKey" placeholder="状态"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm',scope.row)"
                     icon="el-icon-refresh">
            重置
          </el-button>

        </el-form-item>
      </el-form>
      <!--中间表格区域-->
      <el-table v-loading="loading" :data="userManagementList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
<!--        <el-table-column label="id" align="center" prop="id" />-->
        <el-table-column label="流水号" align="center" prop="flowNumber" />
        <el-table-column label="店铺ID" align="center" prop="storeId" />
        <el-table-column label="店铺名称" align="center" prop="storeName" />
        <el-table-column label="接单手机" align="center" prop="orderPhone" />
        <el-table-column label="设备商" align="center" prop="deviceSupplier" />
        <el-table-column label="终端号" align="center" prop="terminalId" />
        <el-table-column label="密钥" align="center" prop="secretKey" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="状态" align="center" prop="status" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--下方分页区域-->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 20]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!-- 切换页面界面 -->
    <el-card v-show="isCardVisibleDown">
        <div class="shop-details-container">
          <el-card class="shop-card" hoverable>
            <!-- 第一行表单元素 -->
            <el-form :model="shopInfo2" label-position="left" class="first-row-form">
              <el-form-item label="店铺ID：">
                {{ shopInfo2.shopId }}
              </el-form-item>
              <el-form-item label="详细地址：">
                <span>{{ shopInfo2.address }}</span>
                <el-icon class="map-icon" @click="goToMap">
                  <location-outline />
                </el-icon>
              </el-form-item>
              <el-form-item label="负责人：">
                {{ shopInfo2.manager }} ({{ shopInfo2.phone }})
              </el-form-item>
            </el-form>
            <!-- 第二行表单元素 -->
            <el-form :model="shopInfo2" label-position="left" class="second-row-form">
              <el-form-item label="店铺名称：">
                {{ shopInfo2.name }}
              </el-form-item>
              <el-form-item label="商品：">
                <router-link :to="'/goodsList'" class="goods-link">
                  {{ shopInfo2.goodsCount }} 个
                </router-link>
              </el-form-item>
              <el-form-item label="状态：">
                {{ shopInfo2.status }}
              </el-form-item>
              <el-form-item label="所在地：">
                {{ shopInfo2.location }}
              </el-form-item>
              <el-form-item label="评分：">
                {{ shopInfo2.rating }} 分
              </el-form-item>
            </el-form>
          </el-card>
        </div>
<!--      <el-card>-->
<!--        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate1()">基本信息-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate2()">店铺管理-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate3()">到店自取-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate4()">门店环境-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate5()">资质信息-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate6()">签约合同-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate7()">实名认证-->
<!--        </el-button>-->
<!--        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate8()">银行卡信息-->
<!--        </el-button>-->
<!--      </el-card>-->

      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        </el-tab-pane>
      </el-tabs>
      <div v-if="activeName === 'basicInfo'">
        <div class="shop-info-container">
          <el-card>
            <el-form :model="form" label-width="120px">
              <el-form-item label="店铺名称">
                <span>{{ form.shopName }}</span>
              </el-form-item>
              <el-form-item label="店铺类型">
                <span>{{ form.shopType }}</span>
              </el-form-item>
              <el-form-item label="主营">
                <span>{{ form.mainBusiness }}</span>
              </el-form-item>
              <el-form-item label="辅营">
                <span>{{ form.auxiliaryBusiness }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{ form.status }}</span>
              </el-form-item>
              <el-form-item label="配送方式">
                <span>{{ form.deliveryMethod }}</span>
              </el-form-item>
              <el-form-item label="开店日期">
                <span>{{ form.openDate }}</span>
              </el-form-item>
              <el-form-item label="保证金">
                <span>{{ form.deposit }}</span>
              </el-form-item>
              <el-form-item label="保证金状态">
                <span>{{ form.depositStatus }}</span>
              </el-form-item>
              <el-form-item label="结算方式">
                <span>{{ form.settlementMethod }}</span>
              </el-form-item>
              <el-form-item label="技术服务费比例">
                <span>{{ form.technicalServiceFeeRate }}</span>
              </el-form-item>
              <el-form-item label="最低技术服务费">
                <span>{{ form.minTechnicalServiceFee }}</span>
              </el-form-item>
              <el-form-item label="技术服务费优惠">
                <span>{{ form.technicalServiceFeeDiscount }}</span>
              </el-form-item>
              <el-form-item label="优惠状态">
                <span>{{ form.discountStatus }}</span>
              </el-form-item>
              <el-form-item label="优惠期限">
                <span>{{ form.discountPeriod }}</span>
              </el-form-item>
              <el-form-item label="账户状态">
                <span>{{ form.accountStatus }}</span>
              </el-form-item>
              <el-form-item label="店铺余额">
                <span>{{ form.shopBalance }}</span>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <!-- 继续罗列基本信息相关内容 -->
      </div>
      <div v-if="activeName ==='shopManagement'">
        <div class="shop-info-container">
          <el-card>
            <el-form :model="form1" label-width="120px">
              <!-- 堂食营业 -->
              <el-form-item label="**堂食营业**">
                <div></div>
              </el-form-item>
              <el-form-item label="预订手机号">
                <span>{{ form1.dineInPhone }}</span>
              </el-form-item>
              <el-form-item label="营业时段">
                <span>{{ form1.dineInBusinessHours }}</span>
              </el-form-item>

              <!-- 外卖营业 -->
              <el-form-item label="**外卖营业**">
                <div></div>
              </el-form-item>
              <el-form-item label="接单手机号">
                <span>{{ form1.takeoutPhone }}</span>
              </el-form-item>
              <el-form-item label="营业时段">
                <span>{{ form1.takeoutBusinessHours }}</span>
              </el-form-item>
              <el-form-item label="起送价">
                <span>{{ form1.minOrderAmount }}</span>
              </el-form-item>

              <!-- 外卖配送 -->
              <el-form-item label="**外卖配送**">
                <div></div>
              </el-form-item>
              <el-form-item label="配送方式">
                <span>{{ form1.deliveryType }}</span>
              </el-form-item>
              <el-form-item label="基础距离">
                <span>{{ form1.baseDistance }}</span>
              </el-form-item>
              <el-form-item label="基础配送费">
                <span>{{ form1.baseDeliveryFee }}</span>
              </el-form-item>
              <el-form-item label="每百米计费">
                <span>{{ form1.additionalFeePerHundredMeters }}</span>
              </el-form-item>
              <el-form-item label="最远配送距离">
                <span>{{ form1.maxDeliveryDistance }}</span>
              </el-form-item>
              <el-form-item label="0-3点加价">
                <span>{{ form1.surcharge0To3 }}</span>
              </el-form-item>
              <el-form-item label="3-6点加价">
                <span>{{ form1.surcharge3To6 }}</span>
              </el-form-item>

              <!-- 自行配送 -->
              <el-form-item label="**自行配送**">
                <div></div>
              </el-form-item>
              <el-form-item label="是否自行配送">
                <span>{{ form1.selfDelivery }}</span>
              </el-form-item>
              <el-form-item label="配送时段">
                <span>{{ form1.selfDeliveryHours }}</span>
              </el-form-item>
              <el-form-item label="最远配送距离">
                <span>{{ form1.selfDeliveryMaxDistance }}</span>
              </el-form-item>

              <!-- 线上开票 -->
              <el-form-item label="**线上开票**">
                <div></div>
              </el-form-item>
              <el-form-item label="支持线上开具发票">
                <span>{{ form1.supportOnlineInvoice }}</span>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <!-- 店铺管理相关内容 -->
      </div>
      <div v-if="activeName === 'pickup'">
        <!-- 到店自取相关内容 -->
        <div class="shop-info-container">
          <el-card>
            <el-form :model="form2" label-width="120px">
              <el-form-item label="**服务状态**">
                <span>{{ form2.serviceStatus }}</span>
              </el-form-item>
              <el-form-item label="**抽成比例**">
                <span>{{ form2.commissionRate }}</span>
              </el-form-item>
              <el-form-item label="**开启时段**">
                <span>{{ form2.openPeriod }}</span>
              </el-form-item>
              <el-form-item label="**备货时间**">
                <span>{{ form2.preparationTime }}</span>
              </el-form-item>
              <el-form-item label="**享受商品特价**">
                <span>{{ form2.enjoySpecialPrice }}</span>
              </el-form-item>
              <el-form-item label="**参与自建活动**">
                <span>{{ form2.participateInSelfBuiltActivity }}</span>
              </el-form-item>
              <el-form-item label="**自动参与**">
                <span>{{ form2.autoParticipate }}</span>
              </el-form-item>
            </el-form>

          </el-card>
        </div>
      </div>
      <div v-if="activeName ==='storeEnvironment'">
        <!-- 门店环境相关内容 -->
        <div class="shop-info-container">
          <el-card>
            <el-form :model="form3" label-width="120px">
              <!-- 营业执照部分 -->
              <el-form-item label="**证件名称**">
                <span>{{ form3.businessLicense.name }}</span>
              </el-form-item>
              <el-form-item label="**证件ID**">
                <span>{{ form3.businessLicense.id }}</span>
              </el-form-item>
              <el-form-item label="**证件有效期**">
                <span>{{ form3.businessLicense.expiryDate }}</span>
              </el-form-item>
              <el-form-item label="**证件正面图**">
                <el-image :src="form3.businessLicense.imageUrl" style="width: 100%; height: 300px; object-fit: cover;"></el-image>
              </el-form-item>
              <!-- 经营许可证部分 -->
              <el-form-item label="**证件名称**">
                <span>{{ form3.operationPermit.name }}</span>
              </el-form-item>
              <el-form-item label="**证件ID**">
                <span>{{ form3.operationPermit.id }}</span>
              </el-form-item>
              <el-form-item label="**证件有效期**">
                <span>{{ form3.operationPermit.expiryDate }}</span>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>资质信息
    </el-card>
  </div>
</template>

<script>
import { getList, delById } from '@/api/client/storeInfo'
export default {
  name: "Unit",
  data() {
    return {
      form3: {
        businessLicense: {
          name: '营业执照',
          id: '57447645',
          expiryDate: '2099-01-23',
          imageUrl: 'https://your-image-url-here' // 这里需替换为实际图片地址，若无实际图，可保留此占位符
        },
        operationPermit: {
          name: '经营许可证',
          id: '57447645',
          expiryDate: '2099-01-23'
        }
      },
      form2: {
        serviceStatus: '开启',
        commissionRate: '3%',
        openPeriod: '同外卖营业时段',
        preparationTime: '30分钟 (备货结束后顾客方能选择自取,限5-120分钟)',
        enjoySpecialPrice: '是',
        participateInSelfBuiltActivity: '是',
        autoParticipate: '否'
      },
      form1: {
        dineInPhone: '+8613612345678',
        dineInBusinessHours: '11:30-13:30, 17:30-19:30',
        takeoutPhone: '+8613612345678',
        takeoutBusinessHours: '11:00-14:00, 17:00-20:00, 22:00-次日05:00',
        minOrderAmount: '20元',
        deliveryType: '平台专送',
        baseDistance: '2公里',
        baseDeliveryFee: '4元',
        additionalFeePerHundredMeters: '0.25元 (超出基础距离到最远距离的配送费)',
        maxDeliveryDistance: '5公里',
        surcharge0To3: '1元/单',
        surcharge3To6: '2元/单',
        selfDelivery: '是 (平台无人接单配送时商家可自行配送)',
        selfDeliveryHours: '同外卖营业时段',
        selfDeliveryMaxDistance: '5公里',
        supportOnlineInvoice: '是'
      },
      form: {
        shopName: '辣小龙小龙虾湘菜馆(凤凰广场店)',
        shopType: '餐饮店铺',
        mainBusiness: '湘菜',
        auxiliaryBusiness: '茶饮',
        status: '待营业',
        deliveryMethod: '平台专送',
        openDate: '2099-02-15',
        deposit: '¥1200.00',
        depositStatus: '已缴存',
        settlementMethod: 'T+1',
        technicalServiceFeeRate: '15.00% (该比例为商户外卖对账单中平台抽成的比例)',
        minTechnicalServiceFee: '1元',
        technicalServiceFeeDiscount: '0.5元/单',
        discountStatus: '未开始',
        discountPeriod: '无',
        accountStatus: '正常',
        shopBalance: '¥5716.12'
      },
      shopInfo2: {
        shopId: '100000004',
        address: '民治街道大润发旁',
        manager: '杨店长',
        phone: '+8613612345678',
        name: '辣小龙小龙虾湘菜馆(凤凰广场店)',
        goodsCount: 100,
        status: '营业中',
        location: '广东 深圳 龙华',
        rating: 4.5
      },
      shopInfo: {
        shopName: '辣小龙小龙虾湘菜馆(凤凰广场店)',
        shopType: '餐饮店铺',
        mainBusiness: '湘菜',
        auxiliaryBusiness: '茶饮',
        hasLocation: true, // 用于判断是否显示地址图标
        location: '广东 深圳 龙华',
        address: '民治街道大润发旁'
      },
      elForm: null,
      // shopInfo: {
      //   shopId: '100000004',
      //   shopName: '辣小龙小龙虾湘菜馆(凤凰广场店)',
      //   location: '广东 深圳 龙华',
      //   address: '民治街道大润发旁',
      //   productCount: 100,
      //   rating: 4.5,
      //   managerName: '杨店长',
      //   managerPhone: '+8613612345678',
      //   status: '营业中',
      // },
      shopLogo: '',
      isCardVisible: true,
      isCardVisibleDown: false,
      tabList: [
        { label: '基本信息', name: 'basicInfo' },
        { label: '店铺管理', name:'shopManagement' },
        { label: '到店自取', name: 'pickup' },
        { label: '门店环境', name: 'storeEnvironment' },
        // { label: '资质信息', name: 'qualificationInfo' },
        // { label: '签约合同', name: 'contract' },
        // { label: '实名认证', name:'realNameAuthentication' },
        // { label: '银行卡信息', name: 'bankCardInfo' }
      ],
      activeName: 'shopManagement', // 默认显示基本信息
      isAuditDialogVisible: false,
      // 遮罩层
      loading: true,
      // 单位表格数据
      userManagementList: [],
      // 存储主单位数据
      primaryUnitList: [],
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      keyword: {
        id: null,
        flowNumber:null,
        storeId:null,
        storeName:null,
        orderPhone:null,
        deviceSupplier:null,
        terminalId:null,
        secretKey:null,
        createTime:null,
        status:null
      },
      ids: [],
      title: '',
      dialogFormVisible: false,
      dialogExcelVisible: false,
      unitMeasure: {
        measureCode: '',
        measureName: '',
        primaryFlag: 'Y',
        enableFlag: 'Y',
        remark: '',
        primaryId: null,
        measureId: null,
        changeRate: 1
      },
      unitMeasureRules: {
        measureCode: [
          { required: true, message: '单位编码不能为空', trigger: 'blur' },
        ],
        measureName: [
          { required: true, message: '单位名称不能为空', trigger: 'blur' },
        ],
        primaryFlag: [
          { required: true, message: '是否是主单位不能为空', trigger: 'blur' },
        ],
        enableFlag: [
          { required: true, message: '是否默认启用不能为空', trigger: 'blur' },
        ],
      },
      isShowPrimary: false
    }
  },
  methods: {
    fetchData() {
      //分页 + 模糊查询 带到后端的参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        flowNumber:this.keyword.flowNumber,
        storeId:this.keyword.storeId,
        storeName:this.keyword.storeName,
        orderPhone:this.keyword.orderPhone,
        deviceSupplier:this.keyword.deviceSupplier,
        terminalId:this.keyword.terminalId,
        secretKey:this.keyword.secretKey,
        createTime:this.keyword.createTime,
        status:this.keyword.status
      }
      console.log("params",params);
      //axios.get(url, params).then(res => {}
      getList(params).then(res => {

        console.log("res", res)
        let pageInfo = res.data;//{total:100,dataList:[]}
        console.log("pageInfo", pageInfo)
        this.loading = false;//关闭遮罩层
        this.userManagementList = pageInfo.records;
        console.log("this.measureList", this.userManagementList)
        this.total = pageInfo.total;
      })
    },

    // 获取单位列表
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = [];
      // console.log(selectionRowArr)
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].refundId)
      }
      // console.log("ids",this.ids)
    },
    // 修改计量单位
    handleUpdate(row) {
      this.isCardVisible = !this.isCardVisible;
      this.isCardVisibleDown = !this.isCardVisibleDown;
    },
    // 根据id删除
    handleDelete(row) {
      // console.log(row.measureId)
      this.$confirm('是否确认删除单位编号为' + row.id + '的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        }
        delById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //隐藏卡片
    toggleCardVisibility() {
      this.isCardVisible = !this.isCardVisible;
      this.isCardVisibleDown = !this.isCardVisibleDown;
    },
    // 批量删除
    deleteBatch() {
      this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBatch(this.ids).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    // 模糊搜索
    search() {
      this.fetchData()
    },

    //锁定店家
    lockShop() {
      // 这里调用锁定店铺的接口
      console.log('锁定店铺操作')
    },
    freezeAccount() {
      // 这里调用冻结账户的接口
      console.log('冻结账户操作')
    },

    handleUpdate1() {
      this.activeName = 'basicInfo'
      console.log(this.activeName)
    },
    handleUpdate2() {
      this.activeName ='shopManagement'
      console.log(this.activeName)
    },
    handleUpdate3() {
      this.activeName = 'pickup'
      console.log(this.activeName)
    },
    handleUpdate4() {
      this.activeName = 'storeEnvironment'
      console.log(this.activeName)
    },
    handleUpdate5() {
      this.activeName = 'qualificationInfo'
      console.log(this.activeName)
    },
    handleUpdate6() {
      this.activeName = 'contract'
      console.log(this.activeName)
    },
    handleUpdate7() {
      this.activeName ='realNameAuthentication'
      console.log(this.activeName)
    },
    handleUpdate8() {
      this.activeName = 'bankCardInfo'
      console.log(this.activeName)
    },
    // 重置表单
    resetSearchForm(formName,row) {
      this.keyword = {};

      // this.$refs[formName].resetFields();
      // console.log("qweqewqeqe----------",this.$refs[formName])
      this.fetchData()
    },
    //导出
    downloadExcel(row) {}
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.shop-detail-card {
  background-color: #f0f5ff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 500px;
  overflow-y: auto; /* 当内容超出高度时显示纵向滚动条 */
}
.logo-container {
  text-align: center;
  margin-bottom: 20px;
}
.shop-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.info-container {
  line-height: 1.6;
}
.action-button {
  margin-right: 10px;
}
/* 调整表单布局为两行 */
.shop-card {
  display: flex;
  flex-wrap: wrap;
}

.first-row-form,
.second-row-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 33.33%; /* 每个表单项占三分之一宽度 */
  box-sizing: border-box;
  padding: 0; /* 可根据需要调整内边距 */
  line-height: 30px; /* 设置行高为 30px */
}
.el-form-item__label {
  line-height: 30px; /* 确保标签行高一致 */
}
.el-form-item__content {
  line-height: 30px; /* 确保内容行高一致 */
}
</style>
